<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../../css/web.css">
	<link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
	<script type="text/javascript" src="../../js/jquery.min.js"></script>
	<script type="text/javascript" src="../../js/jquery.SuperSlide.2.1.1.js"></script>
	<script type="text/javascript" src="../../js/laydate/laydate.js"></script>
</head>
<body id="writeComplain">

	<div class="wrap">

		<div class="top">
	        <div class="Topsearch clearfix">
	            <div class="logo left"><img src="../../img/indexLogo.png"></div>
	            <div class="search right">
	                <div class="Insearch clearfix"><input class="left" type="text" name="" placeholder="请输入关键字"><button class="left">搜索</button></div>
	                <div class="searchHot">
	                    <span>热搜词 : </span>
	                    <a href="javascript:;">天后宫</a>
	                    <a href="javascript:;">湿地公园</a>
	                    <a href="javascript:;">景点</a>
	                    <a href="javascript:;">特产</a>
	                </div>
	            </div>
	        </div>
	        <ul class="TopNav clearfix">
	            <li><a class="haveBorder first" href="../../index.html">首页</a></li>
	            <li><a class="haveBorder" href="../active.html">政务动态</a></li>
	            <li><a class="haveBorder" href="../open.html">政务公开</a></li>
	            <li><a class="haveBorder" href="../service.html">办事服务</a></li>
	            <li><a class="haveBorder" href="../interaction.html">公众互动</a></li>
	            <li class="active"><a class="haveBorder" href="../public.html">公众服务</a></li>
	            <li><a href="../toppic.html">专题中心</a></li>
	        </ul>  
	    </div>

		<div class="content">
			<div class="counterNav">
				<div class="complainSlide">					
					<div class="bd">
						<ul class="Allinputs">											
							<li>
								<p class="title">投诉对象信息</p>
								<ul class="inner">
									<li class="six">
										<div class="inputs"><span>投诉单位名称 : </span><input id="Ttitle" type="text" name="" placeholder="标题不少于10个字"></div>
									</li>
									<li>
										<div class="inputs">
											<span>联系电话 :</span>
											<input type="text" name="" placeholder="请填写投诉单位电话">
										</div>
									</li>
									<li>
										<div class="inputs clearfix">
											<div class="clearfix name">
												<span class="left">
													<span class="sign">*</span>
													地
												</span>
												<span class="secname right">址 :</span></span>
											</div>
											<input id="C-address" class="right specialA" type="text" name="" placeholder="请填写投诉单位地址">
										</div>
									</li>
								</ul>
							</li>

							<li>
								<p class="title">投诉事由</p>
								<ul class="inner">
									<li>
										<div><p>
												<span class="sign">*</span>
												投诉主题
											</p>
										</div>
										<div class="textareaTitle">
											<input id="title" type="text" name="" placeholder="标题不少于10个字" class="specialI">
											<i class="icon iconfont icon-xxxxxx- titleI"></i>
											<span class="warn warnT">标题不少于10个字</span>
										</div>
									</li>
									<li>
										<div><p>
												<span class="sign">*</span>
												事件描述</p>
										</div>
										<div class="textareaWrap">
											<textarea id="inner" name="" placeholder="内容不少于50个字" class="specialI"></textarea>
											<i class="icon iconfont icon-xxxxxx- wrapI"></i>
											<span class="warn warnW">内容不少于50字</span>  
										</div>
									</li>
								</ul>
							</li>

							<li>
								<form class="agree">
									<input id="agree" type="checkbox" name="agree">我同意<span class="know" onclick="showDiv()">《投诉须知》</span>内容
								</form>
							</li>
							
							<li class="btns">
								<button id="up">提 交</button>
							</li>
							<li>								
								<div id="popWindow" class="popWindow" style="display: none;"></div> 
								<div id="maskLayer" class="maskLayer" style="display: none;"> 
									<p>
										<span class="M-title">投诉须知</span>
										在进行投诉前，请先阅读投诉须知，凡不属于投诉范围的事项，我中心有权不予处理。<br />一、投诉人可以就以下事项向旅游投诉处理机构投诉：<br />1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										1、认为经营者违反合同约定<br />
										
									</p>
									
										<a href="#" onclick="closeDiv()" style="cursor:pointer;text-decoration: none;"> 
										我要投诉 
										</a> 
									
								</div> 
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="d-footer clearfix">
	        <ul class="left link">
	            <li class="title">友情链接</li>
	            <li class="clearfix"><a class="left" href="javascript:;">南沙区政府</a><a class="right" href="javascript:;">广州市体育局</a></li>
	            <li class="clearfix"><a class="left" href="javascript:;">广州市旅游局</a><a class="right" href="javascript:;">广州市文广局</a></li>
	            <li class="clearfix"><a class="left" href="javascript:;">广州市政府</a><a class="right" href="javascript:;">广东省政府</a></li>
	        </ul>
	        <ul class="QRcode left">
	            <li><img src="../../img/weixin.png"><p>印象南沙</p></li>
	            <li><img src="../../img/APP.png"><p>印象南沙</p></li>
	            <li><img src="../../img/gongzhong.png"><p>印象南沙</p></li>
	        </ul>
	        <ul class="left copy">
	            <li>
	                <a href="aboutUs.html"><span>关于我们</span></a>
	                <span class="between">-</span>
	                <a href="aboutUs.html"><span>版权保护</span></a>
	                <span class="between">-</span>
	                <a href="aboutUs.html"><span>网站帮助</span></a>
	                <span class="between">-</span>
	                <a href="map.html"><span>网站地图</span></a>
	            </li>
	            <li>2016 &copy 版权归广州市南沙区文化广电新闻出版局所有</li>
	            <li>地址 : 广州市南沙区凤凰大道1号</li>
	            <li>粤ICP备10041711号-3</li>
	        </ul>
	    </div>

	</div>

	<script type="text/javascript">		

		//同意
		$("#agree").prop("checked",true);

		$("#agree").change(function(){
			if($('#agree').is(':checked')) {
				$("#up").css({"disabled":"false","background-color":"#0d72b8"});
				console.log("aaa")
			}else{
				$("#up").css({"disabled":"true","background-color":"#ababab"});
				console.log("bbb")
			}
		})		
		
		
		//蒙版
		
		function showDiv() { 
		document.getElementById('popWindow').style.display = 'block'; 
		document.getElementById('maskLayer').style.display = 'block'; 
		} 
		function closeDiv() { 
		document.getElementById('popWindow').style.display = 'none'; 
		document.getElementById('maskLayer').style.display = 'none'; 
		} 
		

		$("#title").blur(function(){
			console.log($("#title").val().length)
			if($("#title").val().length<10){
				$("#title").css("border","1px #ff0000 solid");
	        	$(".titleI").css("display","inline-block");
	        	$(".warnT").css("display","inline-block");
	        }else{
	        	$("#title").css("border","1px #ccc solid");
	        	$(".titleI").css("display","none");
	        	$(".warnT").css("display","none");
	        }
		})

		$("#inner").blur(function(){
			if($("#inner").val().length<=50){
				$("#inner").css("border","1px #ff0000 solid");
	        	$(".wrapI").css("display","inline-block");
	        	$(".warnW").css("display","inline-block");
	        }else{
	        	$("#inner").css("border","1px #ccc solid");
	        	$(".wrapI").css("display","none");
	        	$(".warnW").css("display","none");
	        }
		})

		$("#Caddress").blur(function(){
			if($("#Caddress").val().length<=0){
				$("#Caddress").css("border","1px #ff0000 solid");
	        	$(".Akong").css("display","inline-block");
	        	$(".warnKongA").css("display","inline-block");
	        }else{
	        	$("#Caddress").css("border","1px #ccc solid");
	        	$(".Akong").css("display","none");
	        	$(".warnKongA").css("display","none");
	        }
		})

		$("#C-address").blur(function(){
			if($("#C-address").val().length<=0){
				$("#C-address").css("border","1px #ff0000 solid");
	        	$(".Akong").css("display","inline-block");
	        	$(".warnKongA").css("display","inline-block");
	        }else{
	        	$("#C-address").css("border","1px #ccc solid");
	        	$(".Akong").css("display","none");
	        	$(".warnKongA").css("display","none");
	        }
		})



	</script>

</body>
</html>